<template>
	<view class="container">
		<u-sticky>
			<view class="nav-bar flex-y-center"
				:style="{paddingTop: getMenuButton().top + 'px', height: getMenuButton().height + 'px'}">
				<view class="page-title">消息</view>
			</view>
		</u-sticky>
		
		<view class="msg-list">
			<view class="msg-item flex-y-center" v-for="(item, index) in 10">
				<image src="/static/images/icon-msg.png" class="msg-icon" mode=""></image>
				<view class="msg-right">
					<view class="top-row flex-x-bet-y-center">
						<text>系统消息</text>
						<text class="date">昨天</text>
					</view>
					<view class="content ellipsis">
						您购买的***已发货您购买的***已发货您购买的***已发货您购买的***已发货您购买的***已发货您购买的***已发货
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.container{
		background-color: #fff;
	}
	
	.nav-bar {
		position: relative;
		padding: 20rpx 30rpx;
		background: #fff;


		.address {
			font-size: 29rpx;
			color: #333333;

			.address-text {
				width: 200rpx;
			}
		}

		.page-title {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			font-size: 35rpx;
			color: #000000;
			text-align: center;
		}
	}
	
	.msg-list{
		padding: 0 30rpx;
		
		.msg-item{
			padding: 30rpx 0;
			border-bottom: 1rpx solid #EBEBEB;
			
			.msg-icon{
				width: 96rpx;
				height: 96rpx;
				margin-left: 20rpx;
			}
			
			.msg-right{
				margin-left: 20rpx;
				flex:1;
			}
			
			.top-row{
				font-weight: bold;
				font-size: 29rpx;
				color: #333333;
				
				.date{
					font-weight: 500;
					font-size: 25rpx;
					color: #999999;
				}
			}
			
			.content{
				width: 500rpx;
				font-weight: normal;
				font-size: 27rpx;
				color: #666666;
				padding-top: 15rpx;
			}
		}
		
		.msg-item:last-child{
			border: 0;
		}
	}
</style>